<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="订单详情" left-arrow fixed @click-left="onClickLeft" />
        <div class="obligation_tops">
            <div class="obligation_top_time">
                <div>
                    <img v-if="orderList.status_icon == 1 || orderList.status_icon == 2"
                        src="../../../../images/mine/icon_time.png" alt="">
                    <img v-if="orderList.status_icon==0" src="../../../../images/mine/icon_close.png" alt="">
                    <img v-if="orderList.status_icon == 3" src="../../../../images/mine/icon_wanc.png" alt="">
                    {{ orderList.status_text }}
                </div>
                <div v-if="orderList.status == 20 || orderList.status==30" style="color: #999;">{{ orderList.shipping_name }}</div>
                <div v-else>{{orderList.status=100?'': secindsList }}</div>
                <!-- {{ secindsList }} -->
            </div>
            <div class="logistics_info" v-if="orderList.shipping_name" @click="getLogistics">
                <img src="../../../../images/mine/icon_wuliu.png" alt="">
                <div class="logistics_info_left">
                    <div>{{ shipping.theLastMessage}}</div>
                    <div>{{ shipping.theLastTime}}</div>
                </div>
                <van-icon name="arrow" size="0.3rem" color="#fff" class="logistics_info_icon" />
            </div>
            <div class="obligation_top_address">
                <img src="../../../../images/mine/icon_adress.png" alt="">
                <div>
                    <div class="obligation_top_address_name">
                        <!-- 名称 <i>1555555</i> <span>默认</span> -->
                        <!-- {{ contactName}} <span>默认</span> -->
                    </div>
                    <div class="obligation_top_address_address">
                        <!-- {{ addressDetails }} -->
                    </div>
                </div>
            </div>
        </div>
        <div class="order_name">
            <!-- <div class="order_name_left"> -->
            <div class="order_name_left"> <img src="../../../../images/mine/shop.png" alt="">{{ orderList.shop_name }}
            </div>
            <!-- </div> -->
            <!-- <div class="order_name_right">等待付款</div> -->
        </div>
        <div v-for="item, index in orderList.items" :key="index">
            <div class="order_list">
                <img :src="item.left_icon" alt="">
                <div class="order_goods">
                    <div class="order_goods_name">{{ item.title }}</div>
                    <div class="order_goods_sku">{{ item.sku_text }}</div>
                    <div class="order_goods_price"><span>{{ item.price_text }}</span> <span>{{ item.quantity_text
                            }}</span></div>
                </div>
            </div>

        </div>
        <!--  -->
        <div class="obligation_item">
            <div class="obligation_item_con" v-for="item, index in orderList.expense_items" :key="index">
                <div>{{ item.left_text }}</div>
                <div>{{ item.right_text }}</div>
            </div>
            <!-- <div class="obligation_item_con">
                <div>补贴金额：</div>
                <div>￥666</div>
            </div>
            <div class="obligation_item_con">
                <div>订单编号：</div>
                <div>￥666</div>
            </div>
            <div class="obligation_item_con">
                <div>下单时间：</div>
                <div>￥666</div>
            </div> -->

        </div>
        <div class="obligation_bom">
            <div class="obligation_btn">
                <div class="obligation_btn_price" v-if="orderList.status != 10">
                    <!-- 应付金额
                    <br>
                    <span>{{ orderList.summary_price_text }}</span> -->
                </div>
                <div class="obligation_btn_price" v-else>应付金额
                    <br>
                    <span>{{ orderList.summary_price_text }}</span>
                </div>
                <div style="display: flex;">
                    <div class="" v-for="itemBtn, index in orderList.buttons" :key="index"
                        @click="getOrder(itemBtn.key)">
                        <van-button class="order_pay_btn" size="small"
                            :color="itemBtn.style ? 'linear-gradient(to right, #FF5851, #E9011B)' : ''" round>{{
                        itemBtn.name
                    }}</van-button>
                    </div>
                </div>
            </div>
        </div>
        <van-popup v-model="show" :style="{ width: '70%' }" round>
            <div class="popup_title" v-if="msg == 0">是否取消该订单？</div>
            <div class="popup_title" v-if="msg == 1">是否删除该订单？</div>
            <div class="popup_title" v-if="msg == 2">是否确认收货？</div>
            <div class="popup_btn_list">
                <van-button class="popup_btn" size="small" round @click="show = false">取消</van-button>
                <van-button class="popup_btn" type="primary" size="small"
                    color="linear-gradient(to right, #FF5851, #E9011B)" round @click="cancelSubmit">确定</van-button>
            </div>
        </van-popup>
    </div>
</template>
<script>
import {ORDER_DELETE,ORDER_CANCEL,ORDER_COMPLETE,SHIPPING_DATA,ORDER_DETAIL} from '@/api/mine'
export default{
    data() {
        return {
            show:false,
            msg:0,
            refundShow:false,
            order:{},
            shipping:{},
            secindsList:"",
            orderList:{},
        }
    },
    mounted() {
        this.orderInfoList()
    },
    methods: {
        orderInfoList(){
            this.$http.get(ORDER_DETAIL+this.$route.query.id,).then(res=>{
            // console.log(res)
            this.orderList=res.data
            if(this.orderList.shipping_code!=''){
                console.log(this.orderList.status,999);
                if(this.orderList.status==100 || this.orderList.status==30){
                    this.initData()
                }
                if(this.orderList.status==10){
                    this.startCountdown(this.orderList.payment_timeout_seconds)
                }
            }
        })
    },
        initData(){
            let params={
                id:this.$route.query.id
            }
            this.$http.post(SHIPPING_DATA,params).then(res=>{
                this.shipping=res.data
            })
        },
        onClickLeft() {
            this.$router.back()
        },
    startCountdown(payment_timeout_seconds) {
    let seconds = payment_timeout_seconds;
    const interval = setInterval(() => {
        if (seconds <= 0) {
            clearInterval(interval);
            // 结束时退出页面
            window.location.href = 'your_exit_page_url'; // 替换为您要跳转的页面
            return;
        }

        // 转换为时分秒格式
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const secs = seconds % 60;

        // console.log(`剩余时间: ${hours}小时 ${minutes}分钟 ${secs}秒`);
        this.secindsList=`${minutes}:${secs}`
        seconds--; // 每秒减少一秒
    }, 1000);
},
        getOrder(key) {
            if(key=='order_cancel'){
                // 取消
                this.msg=0
                this.show=true
            }else if(key=='order_payment'){
                // 立即付款
                 // 去收银台
                this.$router.replace({
                        name: 'cashier',
                     query: {
                         order_id: this.orderList.id
                        }
                })
            }else if(key=='order_delete'){
                // 删除订单
                this.msg=1
                this.show=true
            }else if(key=='order_repeat_purchase'){
                // 再次购买
                this.$router.push({
                path:'/good',
                query:{id:this.orderList.items[0].goods_id}
            })
            }else if(key=='after_sales_apply'){
                // 申请售后
                this.getAfterSales()
            }else if(key=='order_delivery_info'){
                // 查看物流
                this.getLogistics
            }else if(key=='order_complete'){
                // 确认收货
                this.msg=2
                this.show=true
            }else if(key=='after_sales_detail'){
                // 售后详情
                this.$router.push({
                    path:'/refundInfo',
                    query:{id:this.orderList.after_sales_id}
                })
            }
        },
        getLogistics(){
            this.$router.push({
                path:'/logistics',
                query:{id:this.orderList.id}
            })
        },
        //申请售后
        getAfterSales() {
            this.$router.push({path: '/afterSales',query:{id:this.orderList.id}})
        },
        // 确定取消订单
        cancelSubmit(){
            let order
            if(this.msg==0){
                // 取消
                order=this.$http.post(ORDER_CANCEL+this.orderList.id)
            }else if(this.msg==1){
                // 删除
                order=this.$http.post(ORDER_DELETE+this.orderList.id)
            }else if(this.msg==2){
                   // 确认收货
                   order=this.$http.post(ORDER_COMPLETE+this.orderList.id)
            }
            order.then(res=>{
                this.show=false
                this.$toast.success(res.message);
                this.$router.back()
            }).catch(err=>{

            })
        },
    },

}
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    min-height: 100vh;
    padding-top: 46px;
    background: #F2F4F5;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}
.obligation_tops {
    background: #fff;
    padding: 0.3rem;
    margin: 0 auto;
    // margin-top: 0.2rem;
    // border-bottom: 1px solid #999;

    .obligation_top_time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.4rem;
        font-weight: bold;
        margin-bottom: 0.3rem;

        div {
            img {
                width: 0.56rem;
                height: 0.56rem;
                margin-right: 0.1rem;
                vertical-align: middle;
            }
        }

        div:last-child {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 0.32rem;
            color: #F32A23;
            line-height: 0.44rem;
            text-align: center;
            font-style: normal;
        }
    }

    .logistics_info {
        // width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        font-weight: bold;
        line-height: 0.4rem;
        // border: 0.01rem solid #999;
        background: #FFF3F2;
        border-radius: 0.16rem;

        padding: 0.32rem;
        margin-bottom: 0.4rem;

        img {
            width: 0.64rem;
            height: 0.64rem;
        }

        &_left {
            width: 75%;
            div:first-child {
               width: 100%;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
            }
            div:last-child {
                color: #999;
                font-weight: 500;
                font-size: 0.24rem;
            }
        }

        &_icon {
            font-weight: bold;
            margin-top: 0.3rem;
        }

        // &_right{
        //     width: 30%;
        //     text-align: right;
        //     span{

        //     }
        // }
    }

    .obligation_top_address {
        // background: #fff;
        font-size: 0.3rem;
        line-height: 0.5rem;
        display: flex;

        img {
            width: 0.4rem;
            height: 0.4rem;
            margin-top: 0.3rem;
            margin-right: 0.3rem;
        }

        div {
            .obligation_top_address_name {
                font-weight: bold;
                font-size: 0.32rem;

                i {
                    font-style: normal;
                    font-weight: 500;
                    font-size: 0.28rem;
                    // margin: 0 0.2rem
                    color: #999999;
                }

                span {
                    font-weight: 500;
                    font-size: 0.28rem;
                    border: 0.01rem solid #F32A23;
                    padding: 0.02rem 0.05rem;
                    color: #F32A23;
                    border-radius: 0.02rem;
                }
            }

            .obligation_top_address_address {
                font-size: 0.28rem;
                color: #999;

            }
        }
    }
}

.order_name {
    background: #fff;
    display: flex;
    justify-content: space-between;
    font-size: 0.28rem;
    padding: 0.32rem;
    margin-top: 0.16rem;
    // border-bottom: 0.01rem solid #999;
    box-sizing: border-box;

    img {
        width: 0.5rem;
        height: .5rem;
        vertical-align: middle;
        margin-right: .16rem
    }

    &_left {
        font-weight: bold;
    }

    &_right {
        font-size: 0.25rem;
    }
}

.order_list {
    background: #fff;
    padding: 0 0.32rem 0.2rem 0.32rem;
    display: flex;
    justify-content: space-between;
    // border-bottom: 0.01rem solid #999;

    img {
        width: 1.8rem;
    }

    .order_goods {
        width: 70%;
        font-size: 0.3rem;
        line-height: 0.6rem;

        &_name {
            // font-size: 0.3rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* 控制显示的行数 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 0.35rem;
            font-size: 0.3rem;
            // font-weight: bold;
        }

        &_sku {
            font-size: 0.28rem;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &_price {
            font-size: 0.35rem;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            color: #F32A23;
            margin-top: 0.2rem;

            span:last-child {
                font-weight: 500;
                font-size: 0.25rem;
                color: #999;
            }
        }
    }
}

.obligation_item {
    padding: 0.2rem;
    background: #fff;
    margin-top: 0.16rem;

    .obligation_item_con {
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        line-height: 0.6rem;

        div:last-child {
            color: #999999;
        }
    }
}

.obligation_bom {
    width: 100%;
    position: fixed;
    bottom: 0;
    // border-top: 0.01rem solid #999;
    background-color: #fff;

    .obligation_btn {
        padding: 0.2rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.3rem;

        .obligation_btn_price {
            margin-top: 0.1rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 0.24rem;
            color: #333333;
            line-height: 0.34rem;
            text-align: left;
            font-style: normal;

            span {
                color: #EC0C21;
                font-size: 0.24rem;
                line-height: 0.34rem;
                text-align: left;
                font-style: normal;
            }
        }

        // position: absolute;
        // bottom: 0;
        div {

            .order_pay_btn {
                margin-left: 0.2rem;
            }
        }
    }
}

.popup_title {
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    font-style: normal;
    padding: 0.72rem 0;
}

.popup_btn_list {
    width: 90%;
    margin: 0 auto;
    padding-bottom: .4rem;
    display: flex;
    justify-content: space-between;

    .popup_btn {
        width: 45%;
    }

}
</style>
